<template>
  <div>
    <el-dialog title="出车单详情" :visible.sync="dialogVisible" width="80%" :before-close="handleClose">
      <div style="padding: 20px;background-color: white;" v-if="data.procid">
        <div>
          <el-row>
            <el-col :span="24">
              <div
                class="grid-content bg-purple-dark"
                style="background-color: #F6F6F6;padding: 10px;"
              >
                <b>申请信息</b>
              </div>
            </el-col>
          </el-row>
          <br />
          <el-row class="erow">
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <b>申请人：</b>
                {{ data.usecar.userName }}
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <b>所在单位：</b>
                {{ data.usecar.companyName}}
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <b>申请时间：</b>
                {{ data.usecar.createtime }}
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple-light">
                <b>用车理由:</b>
                {{data.parentName}}
              </div>
            </el-col>
          </el-row>
          <br />
          <el-row class="erow">
            <el-col :span="6">
              <div class="grid-content bg-purple-light">
                <b>用车人数:</b>
                {{data.usecar.carcount}}
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple" >
                <b>开始时间：</b>
                {{ data.usecar.createtime }}
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple-light" >
                <b>结束时间：</b>
                {{data.usecar.endtime}}
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple-light" >
                <b>始发地：</b>
                {{data.usecar.origin}}
              </div>
            </el-col>
          </el-row>
          <br />
          <el-row class="erow">
            <el-col :span="6">
              <div class="grid-content bg-purple" >
                <b>目的地：</b>
                {{ data.usecar.destination }}
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple-light" >
                <b>申请备注：</b>
                {{data.usecar.reason}}
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple-light" >
                <b>状态：</b>
                {{data.usecar.taskname}}
              </div>
            </el-col>
          </el-row>
          <br />
          <el-row>
            <el-col :span="24">
              <div
                class="grid-content bg-purple-dark"
                style="background-color: #F6F6F6;padding: 10px;"
              >
                <b>用车审核</b>
              </div>
            </el-col>
          </el-row>
          <br />
          <el-row class="erow">
            <el-col :span="6">
              <div class="grid-content bg-purple" >
                <b>审核人：</b>
                {{data.shenhe.userName}}
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple" >
                <b>审核时间：</b>
                {{data.shenhe.optime}}
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple" >
                <b>审核状态：</b>
                {{data.shenhe.passStr}}
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple" >
                <b>备注：</b>
                {{data.shenhe.mark}}
              </div>
            </el-col>
          </el-row>
          <br />
          <el-row class="erow">
            <el-col :span="6">
              <div class="grid-content bg-purple" >
                <b>审批人：</b>
                {{data.shenpi.userName}}
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple" >
                <b>审批时间：</b>
                {{data.shenpi.optime}}
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple" >
                <b>审批状态：</b>
                {{data.shenpi.taskName}}
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple" >
                <b>备注：</b>
                {{data.shenpi.mark}}
              </div>
            </el-col>
          </el-row>
          <br />
          <el-row class="erow">
            <el-col :span="6">
              <div class="grid-content bg-purple" >
                <b>调度人：</b>
                {{data.diaoduLiuchen.userName}}
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple" >
                <b>调度时间：</b>
                {{data.diaoduLiuchen.optime}}
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple" >
                <b>备注：</b>
                {{data.diaoduLiuchen.mark}}
              </div>
            </el-col>
          </el-row>
          <br />
        </div>
        <el-row>
          <el-col :span="24">
            <div
              class="grid-content bg-purple-dark"
              style="background-color: #F6F6F6;padding: 10px;"
            >
              <b>出车信息</b>
            </div>
          </el-col>
        </el-row>
        <br />
        <el-row class="erow">
          <el-col :span="6">
            <div class="grid-content bg-purple" >
              <b>司机：</b>
              {{data.diaodu.driverName}}
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple" >
              <b>车牌号：</b>
              {{data.diaodu.carcode}}
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple" >
              <b>出车时间：</b>
              {{data.diaodu.fctime}}
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple" >
              <b>结束时间：</b>
              {{data.diaodu.endtime}}
            </div>
          </el-col>
        </el-row>
        <br />
        <el-row class="erow">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <b>行驶里程：</b>
              {{data.txgbnum}}
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple" >
              <el-col :span="6">
                <b>费用明细：</b>
              </el-col>
              <el-col :span="2"v-if="data.feiyong.fy==0">无</el-col>
              <el-col :span="8"v-if="data.feiyong.fy==1">停车费 {{data.feiyong.tcf}}</el-col>
              <el-col :span="8"v-if="data.feiyong.fy==1">其他费 {{data.feiyong.qtf}}</el-col>
            </div>
          </el-col>
        </el-row>
        <br />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { findAllArticles } from "@/api/infomaction";
import { axios } from "@/api/axios";
// 引入vuex
import { mapGetters } from "vuex";
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: true,
    },
    data: {
      type: Object,
      default: true,
    },
  },
  computed: {
    //获取左侧单位勾选的id数组 [1,2,3]
    ...mapGetters(["userInfo", "selectedComIds"]),
  },
  watch: {
    //监听左侧单位勾选 重新获取数据
    selectedComIds() {
      if (this.data.length != 0) {
        console.log(this.data);
      }
    },
  },
  data() {
    return {
      tableData: [],
      articleIdName: "",
      multipleSelection: [],
      total: 0,
      pageNo: 1,
      pageSize: 10, //默认每页显示10条
    };
  },
  created() {},
  methods: {
    handleClose() {
      this.$emit("update:dialogVisible", false);
    },
    pageSizeChange(newSize) {
      this.pageSize = newSize;
      this.pageNo = 1;
      // this.fetchData();
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(val)
    },
    handleSelectionChange2(val) {
      this.multipleSelection2 = val;
      // console.log(val)
    },
    toDocument(index, row) {
      window.location.href = row.fujianurl;
    },
  },
};
</script>
<style lang="scss" scoped>
.companybook-main {
  margin: 0 auto;
  padding: 10px;
  border-radius: 4px;
  background-color: #fff;
}

.companybook-body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  background-color: #eef1f6;
  padding: 10px;
}

.g-title {
  height: 20px;
  padding-left: 8px;
  line-height: 22px;
  font-size: 16px;
  font-weight: 400;
  border-left: 2px solid #f54e40;
  margin: 10px 0;
  display: inline-block;
}
</style>
